<template>
  <section>
    预览成h5
    <div v-for="(widget,i) in page.widgets">
      <div class="score-box" style="border: 1px solid red" v-if="widget.code === 'score-grade'">
        <div class="show-text">
          <div v-for="(val,key) in widget.data.showText" style="text-align: center">
            <div v-if="key === 'percentNum'">您的湿气指数为：{{val}}%</div>
            <div v-else-if="key === 'name'">{{val}}</div>
            <div v-else-if="key === 'grade'">{{val}}</div>
          </div>
        </div>
        <div class="progress">
          <el-progress type="circle" :width=200 :percentage="percentage" :status="status" :show-text="false"></el-progress>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "typeh5",
    props:['page'],
    data(){
      return{
        status:'success',
        percentage:0,
        showText:null
      }
    },
    watch:{
      page(nv,ov){
        if(nv) this.initWidgets(nv)
      }
    },
    created(){
      console.log('看下预览的数据--------',this.page)
      this.initWidgets(this.page.widgets)
    },
    methods:{
      initWidgets(array){
        array.forEach(a=>{
          if(a.code === 'score-grade'){
            //给模拟数据
            let baseShowText={
              desc:'描述介绍',
              percentNum:75,
              name:'资深潮人',
              grade:'C',
              score:6,
            }
            let showText={}
            for(let key in baseShowText){
              console.log('key----------',key)
              let index =a.config.val.indexOf(key,index)
              if(index >=0) showText[key]=baseShowText[key]
            }
            console.log('为啥一换位置就没了？？？',showText)
            Vue.set(a.data,'showText',showText)
          }
        })
      }
    }
  }
</script>

<style scoped>
  .score-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .show-text{
    border: 1px solid blue;
    position: absolute;

  }
  .progress{
    border: 1px solid green;
    width: 50%;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
</style>
